<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <style type="text/css">
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            -webkit-tap-highlight-color: transparent;
        }

        a {
            text-decoration: none;
            color: #ccc;
        }

        a:hover {
            color: coral;
        }

        .search {
            width: 424px;
            height: 34px;
            border: 2px solid darkcyan;
        }

        #out {
            width: 374px;
            margin: 50px auto;
        }

        div input {
            width: 350px;
            border: none;
            outline: none;
            padding-left: 5px;
        }

        div .btn {
            width: 70px;
            background-color: darkcyan;
            color: white;
            font-weight: 400;
            font-size: 15px;
            border: 2px solid darkcyan;
            transition: 0.2s all;
            text-align: center;
            line-height: 26px;
        }

        div .btn:hover {
            font-weight: 900;
            cursor: pointer;
        }

        div input,
        div .btn {
            float: left;
            height: 30px;
        }

        ul {
            display: flex;
            list-style: none;
            font-size: 10px;
            width: 350px;
            margin-top: 5px;
            justify-content: space-around;
        }
        .btnn {
            width: 70px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            color: white;
            background-color: blueviolet;
        }
        .btnn:hover {
            cursor: pointer;
        }
    </style>


    <body>
        <div id="out">
            <div class="search">
                <input type="text" name="" id="inputs" value="" placeholder="" />
                <div class="btn">搜索</div>
            </div>
            <ul class="nav">
                <li><a href="#">iPhone</a></li>
                <li><a href="#">华为nova 4</a></li>
                <li><a href="#">荣耀V20</a></li>
                <li><a href="#">红米Note7</a></li>
                <li><a href="#">一加</a></li>
                <li><a href="#">oppo</a></li>
                <li><a href="#">vivo</a></li>
                <li><a href="#">锤子</a></li>
            </ul>
        </div>
        <div class="btnn">点我</div>
    </body>
    <script type="text/javascript">
        var input = document.querySelector('#inputs');
        input.placeholder = '手机'
        input.onfocus = function() {
            this.placeholder = ''
        }
        input.onblur = function() {
            this.placeholder = '手机'
        }
        var btn = document.querySelector('.btn');
        btn.onclick = function() {
            alert(input.value ? input.value : input.placeholder)
        }
        var btnn = document.querySelector('.btnn');
        var count = 0
        btnn.onmouseenter = function() {
            var num = parseInt(Math.random() * (10 - 1 + 1) + 1);
            this.style.transform = 'translate('+ 100 * num + 'px)'
            count ++;
        }
        btnn.onclick = function() {
            alert('恭喜你，你总共点了'+count+'次点到了')
            count = 0;
        }
    </script>
</html>
